 /* 普通注释  会保留到编译后的文件 */
// 静默注释  只保留在SASS源文件中，编译后被省略。

// SASS允许使用变量，所有变量以$开头。  => 存储数据

// @use "sass:math"; //使用sass中的math模块

//1.现将公共sass语法提取出来  哪里需要使用就引入
//2.可以在index.sass里面引用其他sass,请求时只需要请求一个sass,将sass整合到一起,得到一个总的css, 可以提高请求效率
// 如果期望某些sass不编译,只做引入效果,可以在改sass文件名前加 "_"

//可以引用公共sass
// @import "common.scss";

$hot:#e1251b;
$cool:#CCFFFF;
$warm:#FFCCCC;
$grey:#999999;
$success:#33CC99;
$dange:red;

$centerWidth:1226px;

$typeOne: 14px/16px "微软雅黑";
$typeTwo: 14px/16px "宋体";

$side:left;

// @function pxToRem($val){
//     @return #{math.div($val,100px)}rem;
// }

//@mixin  混合   可以重复使用的代码(1)(2)
//(1)引入公共代码段  @include typeArea();
@mixin typeArea{
    width:$centerWidth;
    margin:0 auto;
}

@mixin elePosCenter{
    background-color:$dange;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
}

@mixin textCenter($val:24px){
    text-align: center;
    line-height: $val;
}

@mixin comp($prop,$val){
    -ms-#{$prop}: $val;
    -moz-#{$prop}: $val;
    -webkit-#{$prop}: $val;
    #{$prop}: $val;
}

.hearder,.banner,.main,.footer{
    @include typeArea();
}

.box{
    width: 100px;
    height: 100px;
    @include elePosCenter();
    @include textCenter(200px);

    //兼容
    // -ms-transition: opacity 0.5s 0s linear;
    // -moz-transition: opacity 0.5s 0s linear;
    // -webkit-transition: opacity 0.5s 0s linear;
    // transition: opacity 0.5s 0s linear;

    @include comp(transition,opacity 0.5s 0s linear);
    @include comp(box-shadow,1px 1px 2px 1px rgba(0,0,0,0.5) );
   
}

.box:hover{
    opacity: 0;
}

.body {
    font: $typeOne;
}

.box-#{$side}{
    width: 100px;
    height: 100px;
}

// (2)继承(继承现有的sass(class id) 继承里面全部内容
// 本质:群组选择器
// .w {
//     width: $typeArea;
//     margin: 0 auto;
// }

// .hearder,.banner,.main,.footer{
//     @extend .w;
// }
